<template>
    <div class="app-container">
        <div class="filter-container">
            <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleEdit">添加</el-button>
        </div>

        <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" row-key="menu_id"
                border height="80vh" class="table-container" :tree-props="{ children: '_child', hasChildren: true }">
            <el-table-column show-overflow-tooltip prop="menu_name" label="菜单名称"/>
            <el-table-column show-overflow-tooltip prop="vue_path" label="菜单地址"/>
            <el-table-column show-overflow-tooltip label="图标" align="center">
                <template slot-scope="{row}"><i :class="row.vue_icon"></i></template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="api_url" label="API路由" align="center"/>
            <el-table-column show-overflow-tooltip prop="menu_sort" label="排序" align="center"/>
            <el-table-column align="center" label="操作">
                <template v-slot="{row}">
                    <!-- 状态变更 -->
                    <el-button type="text"  @click="handleEdit(row,0)">添加子菜单</el-button>
                    <!-- 编辑与删除 -->
                    <el-button type="text"  @click="handleEdit(row,1)">编辑</el-button>
                    <el-button type="text"  @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <edit ref="edit" @fetchData="getMenus"></edit>
    </div>
</template>

<script>
    import Edit from "./components/menu_detail";

    export default {
        name: "seller_menu",
        components: {Edit},
        filters: {
            statusFilter(status) {
                const statusMap = {
                    1: 'success',
                    0: 'danger'
                };
                return statusMap[status];
            },
        },
        data() {
            return {
                defaultProps: {
                    children: "_child",
                    label: "label",
                },
                list: [],
                listLoading: true,
                elementLoadingText: "正在加载...",
            };
        },
        async created() {
            this.getMenus();
        },
        methods: {
            handleEdit(row,i) {
                if (row.menu_id) {
                    this.$refs["edit"].showEdit(row,i);
                } else {
                    this.$refs["edit"].showEdit();
                }
            },
            handleDelete(row) {
                if (row.menu_id) {
                    this.$confirm(
                        '你确定要删除操作吗？删除之后将无法恢复，请谨慎操作',
                        'Warning',
                        {
                            confirmButtonText: '确认',
                            cancelButtonText: '取消',
                            type: 'warning'
                        })
                        .then(async () => {
                            const {msg} = await this.$delete(this.$api.adminSellerMenu+this.$api.delete,{menu_id: row.menu_id})

                                //setDel({menu_id: row.menu_id});
                            this.$message({
                                message: msg,
                                type: 'success'
                            });
                            this.getMenus();
                        })
                        .catch(err => {
                            console.error(err);
                        });
                }
            },
            async getMenus() {
                this.listLoading = true;
                const {data} = await this.$get(this.$api.adminSellerMenu);

                this.list = data;
                console.log(this.list)
                setTimeout(() => {
                    this.listLoading = false;
                }, 300);
            },
            // 状态变更
            async changeStatus(row, value, filed) {
                console.log('this.$api.adminSellerMenu')
                console.log(this.$api.changeFiledStatus)
                const {data, msg, status} = await this.$put(this.$api.adminSellerMenu+this.$api.changeFiledStatus,{
                    'menu_id': row.menu_id,
                    'change_field': filed,
                    'change_value': value
                });

                // 设置成功之后，同步到当前列表数据
                if (status == 1){
                    row[filed] = value;
                }
                this.$message({
                    message: msg,
                    type: status == 1 ? 'success' : 'error',
                });
            },
        },
    };
</script>
